<template>
  <a-form class="form" :model="formData">
    <template v-for="(module, index) in formData" :key="index">
      <a-form-item class="itemTitle">
        <div class="title">{{ numberToChinese(index + 1) + '、' + module.name }}</div>
      </a-form-item>
      <template v-for="(subitem, i) in module.list" :key="i">
        <template v-if="isShowCondition(subitem)">
          <a-form-item class="subitemName">
            <span
              >{{ i + 1 + '. ' + subitem.questionName
              }}<span>{{
                subitem.questionType.includes('单选')
                  ? '（单选）'
                  : subitem.questionType.includes('多选')
                    ? '（多选）'
                    : ''
              }}</span></span
            >
          </a-form-item>
          <template v-if="subitem.questionType.includes('单选')">
            <a-form-item class="subitemName">
              <a-row :gutter="[48, 8]">
                <template v-for="(option, s) in subitem.options" :key="s">
                  <a-col>
                    <a-space>
                      <a-radio
                        :checked="subitem.value === option.value"
                        @change="() => (subitem.value = option.value)"
                        :disabled="disabled"
                        >{{ option.value }}</a-radio
                      >
                      <a-tooltip v-if="option.input" :title="subitem.inputText">
                        <a-input
                          v-if="option.input"
                          style="width: 210px"
                          v-model:value="subitem.inputText"
                          @input="
                            () => {
                              subitem.value = option.value
                            }
                          "
                          :disabled="disabled"
                          autocomplete="off"
                          :maxlength="option.maxlength"
                          placeholder=""
                        />
                      </a-tooltip>
                    </a-space>
                  </a-col>
                </template>
              </a-row>
            </a-form-item>
          </template>
          <template v-else-if="subitem.questionType.includes('多选')">
            <a-form-item class="subitemNameCheckbox">
              <a-row :gutter="[48, 8]">
                <template v-for="(option, s) in subitem.options" :key="s">
                  <a-col>
                    <a-space>
                      <a-checkbox
                        :checked="subitem.value.includes(option.value)"
                        @change="multipleChange($event, option.value, subitem)"
                        :disabled="disabled"
                        >{{ option.value }}</a-checkbox
                      >
                      <a-tooltip v-if="option.input" :title="subitem.inputText">
                        <a-input
                          v-if="option.input"
                          style="width: 210px"
                          v-model:value="subitem.inputText"
                          @input="
                            () => {
                              subitem.value = Array.from(new Set(subitem.value).add(option.value))
                            }
                          "
                          :disabled="disabled"
                          autocomplete="off"
                          :maxlength="option.maxlength"
                          placeholder=""
                        />
                      </a-tooltip>
                    </a-space>
                  </a-col>
                </template>
              </a-row>
            </a-form-item>
          </template>
          <template v-else>
            <a-form-item class="subitemNameCheckbox">
              <a-textarea
                style="width: 50%; padding: 9px 16px"
                v-model:value="subitem.inputText"
                :disabled="disabled"
                placeholder="请输入你的回答"
                :maxlength="500"
                autoSize
              />
            </a-form-item>
          </template>
        </template>
      </template>
    </template>
  </a-form>
</template>

<script setup lang="ts">
import { numberToChinese } from '@/utils/tools'

const multipleChange = (e, val, item) => {
  console.log(e.target.checked)
  if (e.target.checked) {
    if (item.value.includes(val)) {
      return
    } else {
      item.value.push(val)
    }
  } else {
    const i = item.value.findIndex((v) => {
      return v === val
    })
    if (i > -1) {
      item.value.splice(i, 1)
    } else {
      return
    }
  }
}

// 规则判断
const isShowCondition = (data: any) => {
  if (!data.showCondition) {
    return true
  } else {
    const conditionResult: any = []
    data.showCondition.conditions.forEach((vo) => {
      props.formData.forEach((list) => {
        const findData = list.list.find((vo2) => vo2.id === vo.id)
        if (findData) {
          console.log(
            vo.value,
            vo.operator,
            findData.value,
            data.questionName,
            evaluateCondition(
              vo.value,
              vo.operator,
              findData.value,
              findData.questionType,
              findData.options
            )
          )
          conditionResult.push(
            evaluateCondition(
              vo.value,
              vo.operator,
              findData.value,
              findData.questionType,
              findData.options
            )
          )
        }
      })
    })

    if (data.showCondition.operator === 'AND') {
      if (conditionResult.includes(false)) {
        if (data.showCondition.show === false) {
          return true
        } else {
          return false
        }
      } else {
        if (data.showCondition.show === false) {
          return false
        } else {
          return true
        }
      }
    } else {
      if (conditionResult.includes(true)) {
        if (data.showCondition.show === false) {
          return false
        } else {
          return true
        }
      } else {
        if (data.showCondition.show === false) {
          return true
        } else {
          return false
        }
      }
    }
  }
}

function evaluateCondition(
  dataValue: any,
  operator: any,
  comparisonValue: any,
  questionType: any,
  findOptions: any
) {
  switch (operator) {
    case '>=':
      return comparisonValue >= dataValue
    case '<=':
      return comparisonValue <= dataValue
    case '>':
      return comparisonValue > dataValue
    case '<':
      return comparisonValue < dataValue
    case '==':
      if (isUpperCase(dataValue)) {
        const matchData = findOptions.find((vo) => vo.sort === dataValue)
        if (matchData) {
          if (questionType.includes('多选') || questionType.includes('输入')) {
            return comparisonValue.includes(matchData.value)
          } else {
            return comparisonValue === matchData.value
          }
        } else {
          return false
        }
      } else {
        if (questionType.includes('多选') || questionType.includes('输入')) {
          return comparisonValue.includes(dataValue)
        } else {
          return comparisonValue === dataValue
        }
      }
    case '===':
      if (isUpperCase(dataValue)) {
        const matchData = findOptions.find((vo) => vo.sort === dataValue)
        if (matchData) {
          if (questionType.includes('多选') || questionType.includes('输入')) {
            return comparisonValue.includes(matchData.value)
          } else {
            return comparisonValue === matchData.value
          }
        } else {
          return false
        }
      } else {
        if (questionType.includes('多选') || questionType.includes('输入')) {
          return comparisonValue.includes(dataValue)
        } else {
          return comparisonValue === dataValue
        }
      }
    case '!=':
      return comparisonValue != dataValue
    default:
      return false
  }
}

// 判断匹配值是否为选项
const isUpperCase = (letter) => {
  return /^[A-Z]$/.test(letter)
}

const props = defineProps(['formData', 'disabled'])
const emit = defineEmits(['update:formData', 'reset'])
</script>

<style lang="less" scope>
.ant-form-item {
  &.itemTitle {
    margin: 10px 0;

    .title {
      height: 32px;
      padding-left: 16px;
      font-size: 14px;
      font-weight: 600;
      line-height: 32px;
    }
  }

  &.subitemName {
    margin-bottom: 0;
  }

  &.subitemNameCheckbox {
    margin-bottom: 0;
  }
}

html[theme='light'] {
  .ant-form-item {
    font-size: 14px;

    &.itemTitle {
      background: #f7f8fa;

      .title {
        color: #1d2129;
      }
    }
  }
}

.red {
  color: #ff1313;
}
</style>
